<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Environment Monitoring</title>
<style>
body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 arial;
	text-align:center;
	height:100%;
	width:100%;
}
img {
	max-width: 100%;
	max-height: 100%;
	margin:2px;
	border-radius: 6px;
}
a {
	text-decoration:none;
}
#header {
	background-color:black;
	color:white;
	margin:2% 0 0 0;
	padding:5px;
}
#section {
	width:80%;
	margin:0 auto;
	padding:10px;
}
#footer {
	background-color:black;
	font-size:medium;
	color:white;
	clear:both;
	padding:5px;
	position: fixed;
	bottom:0;
	min-width:100%;
}
#counter {
	position:absolute;
	max-height: 50%;
	max-width:50%;
	right: 5%;
	border: 0;
}
</style>
<script>
function updateEnvData()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("tp").innerHTML=JSON.parse(xmlhttp.responseText).tp;
            document.getElementById("tp_time").innerHTML=JSON.parse(xmlhttp.responseText).tp_time;
            document.getElementById("hm").innerHTML=JSON.parse(xmlhttp.responseText).hm;
            document.getElementById("hm_time").innerHTML=JSON.parse(xmlhttp.responseText).hm_time;
            document.getElementById("pm").innerHTML=JSON.parse(xmlhttp.responseText).pm;
            document.getElementById("pm_time").innerHTML=JSON.parse(xmlhttp.responseText).pm_time;
            <!--document.getElementById("fm").innerHTML=JSON.parse(xmlhttp.responseText).fm;-->
            <!--document.getElementById("fm_time").innerHTML=JSON.parse(xmlhttp.responseText).fm_time;-->
            <!--document.getElementById("tl").innerHTML=JSON.parse(xmlhttp.responseText).tl;-->
            <!--document.getElementById("tl_time").innerHTML=JSON.parse(xmlhttp.responseText).tl_time;-->
            document.getElementById("cd").innerHTML=JSON.parse(xmlhttp.responseText).cd;
            document.getElementById("cd_time").innerHTML=JSON.parse(xmlhttp.responseText).cd_time;
        }
    }
    xmlhttp.open("GET","./updateEnvData", true); // 在此处修改文件路径
    xmlhttp.send();

    // window.scrollTo(0,document.body.scrollHeight); // 自动滚动到浏览器底部
    setTimeout("updateEnvData()",5000); // 递归调用
}
</script>
</head>

<body onload="updateEnvData()">
<div id="header">
	<h1>Environment Monitoring</h1>
</div>
<div id="section">
	<p>
		<font size="10">Temperature<br>
            <font size="6"><span id="tp_time">2017-12-07</span></font>
            &nbsp;<span id="tp">0.0</span>&nbsp;℃<br>
		</font>
		<font size="10">Humidity<br>
            <font size="6"><span id="hm_time">2017-12-07</span></font>
            &nbsp;<span id="hm">0.0</span>&nbsp;%<br>
		</font>
		<font size="10">PM2.5<br>
            <font size="6"><span id="pm_time">2017-12-07</span></font>
            &nbsp;<span id="pm">0.0</span>&nbsp;ug/m^3<br>
		</font>
		<!--<font size="10">Formaldehyde<br>-->
            <!--<font size="6"><span id="fm_time">2017-12-07</span></font>-->
            <!--&nbsp;<span id="fm">0.0</span>&nbsp;ppm<br>-->
		<!--</font>-->
		<!--<font size="10">Toluene<br>-->
            <!--<font size="6"><span id="tl_time">2017-12-07</span></font>-->
            <!--&nbsp;<span id="tl">0.0</span>&nbsp;ppm<br>-->
		<!--</font>-->
		<font size="10">CO2<br>
            <font size="6"><span id="cd_time">2017-12-07</span></font>
            &nbsp;<span id="cd">0.0</span>&nbsp;ppm<br>
		</font>
	</p>
</div>
<br/><br/><br/>
<div id="footer">
	© 2017.12.07 HaydnLiao
</div>
</body>
</html>
